<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<!-- <img src="./sushe.jpg" alt=""> -->
	</body>
	<script src="./index.js"></script>
	<script>
		//场景
		const scene = new THREE.Scene();
		//镜头
		const camera = new THREE.PerspectiveCamera(
			75,
			window.innerWidth / window.innerHeight,
			0.1,
			1000
		);
		//渲染器
		const renderer = new THREE.WebGLRenderer();
		renderer.setSize(window.innerWidth, window.innerHeight);
		document.body.appendChild(renderer.domElement);

		//球体
		const geometry = new THREE.SphereGeometry(
			/*半径*/
			99,
			/*垂直节点数量*/
			50,
			/*水平节点数量*/
			50
		); //节点数量越大，需要计算的三角形就越多，影响性能
		geometry.scale(1, 1, -1);

		//球体颜色
		// const material = new THREE.MeshBasicMaterial({
		// 	color: 0x00ff00
		// });

		//贴图
		var texture = new THREE.TextureLoader().load("/static/sushe.jpg");
		var sphereMaterial = new THREE.MeshBasicMaterial({
			map: texture,
		});
		const cube = new THREE.Mesh(geometry, sphereMaterial);
		// cube.material.wireframe = true; //用线框模式大家可以看得清楚是个球体而不是圆形
		scene.add(cube);

		camera.position.z = 5;

		function animate() {
			requestAnimationFrame(animate);

			cube.rotation.x += 0.01;
			cube.rotation.y += 0.01;

			renderer.render(scene, camera);
		}

		animate();
	</script>
</html>
